<template>
  <Layout :tab-id="0">
    <template #content>
      <view
        class="bg-gradient-to-b from-[#90b8fe] to-[#fff] min-h-[100vh] flex flex-col items-center justify-start"
        :style="{ padding: `${useSafeArea.getSafeAreaTop + 20}rpx 0` }"
        @touchstart="handleStart"
        @touchend="handleEnd"
      >
        <view>Hi {{ user.nickname || user.phone }}</view>
        <view class="text-f mt-5 w-[90%] flex flex-col mb-3">
          <text class="text-[#1c2740] text-xl">{{
            `${dayjs().year()}年${dayjs().month() + 1}月${dayjs().date()}日`
          }}</text>
          <text class="text-[#a1a8b0]">{{ weekdayNumber }}</text>
        </view>
        <view class="mt-5 w-[90%] flex mb-3 flex justify-between items-center">
          <wd-input custom-class="input-i" prefix-icon="search" />
          <view
            class="w-[70rpx] h-[70rpx] rounded-[10rpx] bg-[#f5f5f5] flex items-center justify-center"
          >
            <wd-icon name="setting" color="#317fec" size="22px"></wd-icon>
          </view>
        </view>
        <view class="flex flex-col w-[90%] h-[auto] pb-15">
          <text class="font-black">历史活动</text>
          <view
            class="flex flex-col items-start mb-[20rpx] w-[100%] h-[auto] rounded mt-2 bg-[#ffffff]"
            v-for="item in rescueRecordList"
            :key="item.id"
          >
            <view
              v-if="item.rescueImg.length > 0"
              class="w-[100%] h-[300rpx] rounded-tl rounded-tr"
            >
              <image
                v-for="(img, index) in item.rescueImg"
                :key="index"
                class="h-[300rpx]"
                :src="img"
                :style="{ width: `${100 / item.rescueImg.length}%` }"
                mode="scaleToFill"
              />
            </view>
            <view
              class="mt-2 px-2 text-f h-[150rpx] w-[100%] py-2 flex space-between"
            >
              <view class="w-[77%] flex flex-col space-between">
                <text class="font-blod text-[40rpx]">{{ item.name }}</text>
                <text class="text-[26rpx] text-[#a1a8b0]">{{
                  item.address
                }}</text>
                <text class="text-[26rpx] text-[#a1a8b0]"
                  >{{ item.count }}人已参加</text
                >
              </view>
              <view
                class="bg-[#317fec] w-[120rpx] h-[120rpx] flex flex-col justify-center items-center text-[#fff] rounded-[30rpx]"
              >
                <text>{{ dayjs(item.endTime).month() + 1 }}月</text>
                <text>{{ dayjs(item.endTime).date() }}日</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
  </Layout>
  <wd-popup v-model="show" position="left" custom-style="width: 100vw">
    <UserPage @close="show = false"></UserPage>
  </wd-popup>
</template>

<script setup lang="ts">
import Layout from '@/components/Layout/tabbarLayout.vue'
import useStore from '@/store'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { SwipeDetector } from '@/utils/unifunc'
import { computed, ref, onMounted } from 'vue'
import UserPage from './components/myPage.vue'
import { getRescueRecordList } from '@/api/rescue.api'

const show = ref(false)
const rescueRecordList = ref<RescueInfo[]>([])

dayjs.locale('zh-cn')
const { useSafeArea } = useStore()
const weekdayNumber = dayjs().format('dddd')

const swipe = new SwipeDetector({
  threshold: 80
})

const user = computed(() => {
  return uni.getStorageSync('user')
})

function handleStart(e: TouchEvent) {
  swipe.onTouchStart(e)
}

function handleEnd(e: TouchEvent) {
  if (swipe.onTouchEnd(e)) {
    show.value = true
  }
}

onMounted(async () => {
  const res = await getRescueRecordList<any, RescueInfo>({
    page: 1,
    pageSize: 100
  })
  if (res.code === 200) {
    console.log(res.data)
    rescueRecordList.value = res.data.items
  }
})
</script>

<style lang="scss" scoped>
:deep(.wd-input) {
  width: 85% !important;
  border-radius: 10rpx;
}
</style>
